<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card>
        <el-table :data="tableData" ref="tableRef" stripe>
          <el-table-column align="left" prop="label" label="角色"></el-table-column>
          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="toggleExpand(scope.row)"  ></el-button>
            </template>
          </el-table-column>
          <!-- 展开列 -->
          <el-table-column type="expand" width="1">
            <template slot-scope="scope">
              <el-card>
                <el-tree
                  :data="authorityList"
                  show-checkbox
                  ref="tree"
                  node-key="id"
                  :default-checked-keys="resourceCheckedKeys"
                  :props="defaultProps">
                </el-tree>
                <el-button style="margin-left: 90%;" type="primary" size="mini" @click="getCheckAuthorityKeys(scope.row)">保存</el-button>
              </el-card>
            </template>
          </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
    export default {
        data() {
          return {
            tableData: [
              {
                id: 0,
                label: '系统管理员'
              },
              {
                id: 1,
                label: '宿舍管理员'
              },
              {
                id: 2,
                label: '学生'
              }
            ],
            // 权限列表
            authorityList: [],
            // 默认选中的权限列表key
            resourceCheckedKeys: [],
            // 全部权限的 key
            allAuthorityKeys: [],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          }
        },

      created() {
      },

      methods: {

        /* 开展列 */
        toggleExpand(row) {
          //展开时渲染数据
          this.getAuthorityList(row.id);

          //手风琴效果
          let $table = this.$refs.tableRef;
          this.tableData.map((item) => {
            if (row.id !== item.id){
              $table.toggleRowExpansion(item, false);
              item.expansion =false;
            }else
              item.expansion = !item.expansion;
          })
          $table.toggleRowExpansion(row);
        },

        /* 角色权限列表 */
        async getAuthorityList(userType){
          const {data: res} = await this.$axios.get(this.$http+ '/adminManageController/getAuthorityList',{
            params: {
              userType: userType
            }
          });
          //先清空 权限列表 和 默认选中的权限集合
          this.authorityList = [];
          this.resourceCheckedKeys = [];
          this.allAuthorityKeys = [];
          let that = this;
          //遍历权限列表，设置 id  和 label
          res.datas.authorityList.forEach(function (item) {
            //一级列表
            let oneMenuObj = { id: item.menuId, label: item.menuName, children: []};
            //二级列表
            item.levelTwoMenuList.forEach(function (twoMenuItem) {
              let twoMenuObj = { id: twoMenuItem.menuUser.menuUserId + 100, label: twoMenuItem.twoMenuName, isShow: twoMenuItem.menuUser.isShow};
              // 默认勾选的权限
              if (twoMenuItem.menuUser.isShow === 1)
                that.resourceCheckedKeys.push(twoMenuItem.menuUser.menuUserId + 100);
              that.allAuthorityKeys.push(twoMenuItem.menuUser.menuUserId + 100);
              oneMenuObj.children.push(twoMenuObj);
            })
           that.authorityList.push(oneMenuObj)
          });
        },

        /* 获取选中的权限集合 提交到后台修改权限 */
        getCheckAuthorityKeys(row) {
          //没有选择的节点
          const no_select_arr = [];
          for (let i = 0; i < this.allAuthorityKeys.length; i++){
            let flag = false;
            for (let j = 0; j < this.$refs.tree.getCheckedKeys().length; j++){
              if (this.allAuthorityKeys[i] === this.$refs.tree.getCheckedKeys()[j]){
                flag = true;
                break;
              }
            }
            if (!flag)
              no_select_arr.push(this.allAuthorityKeys[i]);
          }

          let arr = JSON.stringify(this.$refs.tree.getCheckedKeys());
          this.$axios.put(this.$http + '/adminManageController/updateAuthority',{
            arr: arr,
            noSelectArr: JSON.stringify(no_select_arr)
          }).then(res => {
            this.toggleExpand(row);
            if (res.data.code === 100)
              return this.$message.error("修改失败，后台处理错误")
            this.$message.success("保存成功")
          }).catch(err => {
            this.$message.error(err)
          })
        }

      }
    }
</script>

<style scoped>

</style>
